<template>
  <view class="scrollAllWrap">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallbcak"
      :up="upOption"
      @up="upCallback"
      top="10px"
    >
      <view v-for="(item, index) in orderList" :key="index">
        <view class="order-content">
          <view class="desc-item">
            <view class="desc-item-label">账单金额:</view>
            <view class="desc-item-value">{{ item.amount || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">账单类型:</view>
            <view class="desc-item-value">{{
              $utils.parDictLabel(billTypeList, item.billType) || '--'
            }}</view>
          </view>
          <view class="desc-item" >
            <view class="desc-item-label">业务类型:</view>
            <view class="desc-item-value">{{ $utils.parDictLabel(relTypeList, item.relType) || '--' }}</view>
          </view>
          <view class="desc-item" >
            <view class="desc-item-label">备注:</view>
            <view class="desc-item-value">{{ item.remark || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">创建时间:</view>
            <view class="desc-item-value">{{ item.gmtTime || '--' }}</view>
          </view>
        </view>
      </view>
    </mescroll-uni>

    <!--底部-->
    <view class="bottom">
      <view class="bottom_text" @click="show = true">
        <u-icon name="search"></u-icon>
        <text class="search">搜索</text>
      </view>
      <view class="sub">总条目: {{ total }} 条</view>
    </view>
    <!--搜索弹框-->
    <u-popup class="search-popup" v-model="show" width="80%">

      <view class="input">
        <text>账单类型</text>
        <picker
          mode="selector"
          @change="onBillTypeChange"
          :range-key="rangeKey"
          :value="queryForm.billType"
          :range="billTypeList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(billTypeList, queryForm.billType) || '请选择账单类型'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>业务类型</text>
        <picker
          mode="selector"
          @change="onRelTypeChange"
          :range-key="rangeKey"
          :value="queryForm.relType"
          :range="relTypeList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(relTypeList, queryForm.relType) || '请选择业务类型'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input" @click="beginTimePicker = true">
        <text>开始时间</text>
        <u-picker
          v-model="beginTimePicker"
          mode="time"
          :params="params"
          @confirm="onBeginTimeChange"
        ></u-picker>
        <view v-if="queryForm.beginTime" class="uni-input">{{ queryForm.beginTime }}</view>
        <view class="uni-input-picker" v-else>请选择开始时间</view>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input" @click="endTimePicker = true">
        <text>结束时间</text>
        <u-picker
          v-model="endTimePicker"
          mode="time"
          :params="params"
          @confirm="onEndTimeChange"
        ></u-picker>
        <view v-if="queryForm.endTime" class="uni-input">{{ queryForm.endTime }}</view>
        <view class="uni-input-picker" v-else>请选择结束时间</view>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="search-warp">
        <view class="search-warp-btn  left" @click="search">
          <u-icon name="search"></u-icon>
          <text class="search">搜索</text>
        </view>

        <view class="search-warp-btn right" @click="reset">
          <u-icon name="reload"></u-icon>
          <text class="search">重置</text>
        </view>
      </view>

      <view class="close-btn" @click="show = false">关闭</view>
    </u-popup>
  </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { mapGetters } from 'vuex';
export default {
  mixins: [MescrollMixin],
  onLoad(optData) {
    this.memberId = optData.memberId;
    console.log('账单列表：' + this.memberId);
  },
  data() {
    return {
      rangeKey: 'dictLabel',
      show: false,
      editpopup: false,
      beginTimePicker: false,
      endTimePicker: false,
      orderList: [],
      total: 0,
      memberId: undefined,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        billType: '',
        relType: '',
        beginTime: '',
        endTime: '',
      },
      checkedMember: {},
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      billTypeList: [],
      relTypeList: [],
      downOption: {
        auto: false, // 是否在初始化后，自动执行downCallback
        autoShowLoading: true, // 显示下拉刷新的进度条
        textColor: '#fff', // 下拉刷新文本颜色
      },
      upOption: {
        auto: false,
        textNoMore: '-- END --',
        empty: {
          use: true,
          tip: '暂无信息',
        },
      },
    };
  },
  onShow() {
    this.downCallbcak();
  },
  created() {
    this.fetchBillType();
    this.fetchRelType();
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    fetchBillType() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'bill_type',
        })
        .then(res => {
          if (res.code === 200) {
            this.billTypeList = res.data;
          }
        });
    },
    fetchRelType() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'mem_bill_rel_type',
        })
        .then(res => {
          if (res.code === 200) {
            this.relTypeList = res.data;
          }
        });
    },

    onBillTypeChange(e) {
      this.queryForm.billType = this.billTypeList[e.target.value].dictValue;
    },
    onRelTypeChange(e) {
      this.queryForm.relType = this.relTypeList[e.target.value].dictValue;
    },
    onBeginTimeChange: function(e) {
      this.queryForm.beginTime =
        e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
    },
    onEndTimeChange: function(e) {
      this.queryForm.endTime =
        e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
    },
    downCallbcak() {
      this.$nextTick(() => {
        this.queryForm.pageNum = 1;
        this.orderList = [];
        this.mescroll && this.mescroll.resetUpScroll(true);
      });
    },
    upCallback() {
      this.init();
    },
    search() {
      this.queryForm.pageNum = 1;
      this.orderList = [];
      this.show = false;
      this.init();
    },
    reset() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        billType: '',
        relType: '',
        beginTime: '',
        endTime: '',
      };
    },
    init() {
      this.queryForm.memberId = this.memberId
      this.$clApi.haoleiAgentApi
        .fetchMemberAccountBillList({
          data: this.queryForm,
        })
        .then(res => {
          if (res.code === 200) {
            this.queryForm.pageNum++;
            this.orderList = this.orderList.concat(res.rows);
            this.total = res.total;
            let pageSize =
              res.total % this.queryForm.pageSize == 0
                ? res.total / this.queryForm.pageSize
                : Math.ceil(res.total / this.queryForm.pageSize);
            this.mescroll.endSuccess(res.rows.length, pageSize >= this.queryForm.pageNum);
          } else {
            this.mescroll.endErr();
          }
        })
        .catch(() => {
          this.mescroll.endErr();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.scrollAllWrap {
  /*height: calc(100vh - 100rpx);*/
  overflow-y: hidden;
  height: 100vh;
  background-color: #2a3a52;

  .bottom {
    width: 100%;
    text-align: center;
    height: 100rpx;
    color: #ee9a49;
    line-height: 100rpx;
    /*padding-top: 20rpx;*/
    position: fixed;
    bottom: 0;
    background-color: #2a3a52;
    z-index: 1;
    display: flex;
    .bottom_text {
      flex: 1;
      .search {
        padding: 20rpx;
      }
    }
    .sub {
      flex: 1;
      text-align: center;
      text-align: left;
    }
  }
  /*搜索框样式*/
  .search-popup {
    .input {
      padding-left: 10rpx;
      line-height: 102rpx;
      font-size: 30rpx;
      display: flex;

      .placeholder {
        color: #f6f7f9;
      }
      input,
      picker,
      u-picker {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }

      .uni-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
      }
      .uni-input-picker {
        padding-right: 30rpx;
      }
    }
    .search-warp {
      display: flex;
      width: 96%;
      margin: 20rpx auto;
      .search-warp-btn {
        width: 96%;
        height: 58rpx;
        line-height: 58rpx;
        border: 1rpx red solid;
        border-radius: 12rpx;
        margin: 20rpx auto;
        text-align: center;
        flex: 1;
        .search {
          margin-left: 20rpx;
        }
      }
      .left {
        margin-right: 5rpx;
        flex: 1;
      }
      .right {
        margin-left: 5rpx;
        flex: 1;
      }
    }
    .close-btn {
      width: 96%;
      height: 58rpx;
      line-height: 58rpx;
      border: 1rpx red solid;
      border-radius: 12rpx;
      margin: 20rpx auto;
      text-align: center;
    }
  }
  .order-content:last-child {
    margin-bottom: 100rpx;
  }
  .order-content {
    min-height: 320rpx;
    margin: 20rpx;
    padding: 40rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    border-radius: 16px;

    .top-content {
      display: flex;
      height: 80rpx;
      margin-bottom: 10rpx;
      line-height: 60rpx;
      border-bottom: 1rpx solid #dcdcdc;
      &-type {
        font-size: 36rpx;
        color: #fff;
      }
      &-status {
        font-size: 32rpx;
        color: #ffe471;
        flex: 1;
        text-align: right;
      }
    }

    .desc-item {
      display: flex;
      min-height: 70rpx;
      font-size: 32rpx;
      color: #fff;
      line-height: 70rpx;

      &-label {
        width: 150rpx;
      }
      &-value {
        flex: 1;
        margin-left: 30rpx;
        padding-top: 8px;
        line-height: 40rpx;
      }
    }

    .bottom-item {
      height: 60rpx;
      line-height: 60rpx;
      color: #fff;
      &-btn {
        width: 161rpx;
        height: 60rpx;
        line-height: 60rpx;
        float: right;
        border-radius: 35rpx;
        border: 1px solid #ffffff;
        text-align: center;
      }
    }
  }
}
</style>
